<template>
    <div class="wrap">
        <div class="header">
            <van-search background="#3BB8FD" shape="round" placeholder="请输入你想要搜索的商品名称" @click="goSearch" :readonly='true'/>
        </div>
        <div class="body">
            <ul class="nav">
                <li
                    :class="{active: activeIndex === index}"
                    v-for="(item, index) in navList"
                    :key="index" @click="changeType(index)">{{item.className}}</li>
            </ul>
            <div class="content">
                <um-paner :iconUrl="iconInfo.cityIcon" :name="cityName" tipText="选择城市" @show="showCity"/>
                <um-paner :iconUrl="iconInfo.schoolIcon" :name="schoolName" tipText="选择学校" @show="goSchool"/>
                <div class="title">{{navList[activeIndex].name}}</div>
                <ul class="list">
                    <li v-for="(item, index) in shopList" :key="index" @click="goItem(item)">
                        <image class="shop-img" :src="item.logoUrl" mode="aspectFit" />
                        <div class="name">{{item.className}}</div>
                    </li>
                </ul>
            </div>
        </div>
        <um-area @cancel="showCity" @changeCity="changeCity" :visibleArea="visibleArea"/>
        <van-action-sheet :show="visibleSchool" @close="visibleSchool = false">
            <van-picker
                :columns="schoolList"
                value-key="schoolName"
                show-toolbar
                title="选择学校"
                @cancel="visibleSchool = !visibleSchool"
                @confirm="schChange"
            />
        </van-action-sheet>
        <!-- <alert-add :visible="addVisible" @show="handleShow"/> -->
		<!-- <alert-city :visible="cityVisible" @show="handleCity" @submit="changeCity"/> -->
    </div>
</template>
<script>
import Paner from '@/components/choose.vue';
import Area from '@/components/area.vue';
const cityIcon = require('@static/images/city-icon.png');
const schoolIcon = require('@static/images/school-icon.png');
export default {
    components: {
       'um-paner': Paner,
       'um-area': Area
    },
    data () {
        return {
            activeIndex: 0,
            navList: [],
            shopList: [],
            cityName: '',
            schoolName: '',
            visibleArea: false,
            visibleSchool: false,
            schoolList: [],
            iconInfo: {
                cityIcon,
                schoolIcon
            }
        };
    },
    methods: {
        changeType(index) {
            this.activeIndex = index;
            this.getShopList(this.navList[index]);
        },
        getShopList({classId}) {
            if (classId) {
                this.$api.getProductTypeList({
                    classId
                }).then(({data}) => {
                    this.shopList = data.proClassTwoList;
                });
            }
        },
        showCity () {
            this.visibleArea = !this.visibleArea;
        },
        goSchool () {
            this.visibleSchool = !this.visibleSchool;
        },
        changeCity(e) {
            const cityInfo = e.values[1];
            this.$setStorage('jobCity', cityInfo);
            this.cityName = cityInfo && cityInfo.name || '';
            this.$api.getSchoolListByArea({ areaId: cityInfo.code }).then(res => {
				this.schoolList = res.data.schoolList;
			});
            this.showCity();
        },
        schChange(e) {
            const schoolInfo = e.target.value;
            this.schoolName = schoolInfo && schoolInfo.schoolName || '';
            // if (schoolInfo.isPass == 2) {
            //     this.$emit("submit");
            // } else {
            //     this.globalData.schoolInfo = schoolInfo;
            // }
            this.$setStorage('schoolInfo', schoolInfo)
            this.goSchool();
        },
        goSearch() {
            wx.navigateTo({ url: '/pages/shop/search/main' });
        },
        goItem(item) {
            wx.navigateTo({ url: `/pages/shop/typeList/main?classId=${item.classId}` });
        }
    },
    onShow () {
        const cityInfo = this.$getStorage('jobCity');
        const schoolInfo = this.$getStorage('schoolInfo');
        this.cityName = cityInfo && cityInfo.name || '';
        this.schoolName = schoolInfo && schoolInfo.schoolName || '';
        this.$api.getNavList().then(({data}) => {
            this.navList = data.proClassOneList;
            if (data.proClassOneList.length) {
                this.getShopList(data.proClassOneList[this.activeIndex]);
            }
        });
        if (cityInfo) {
            this.$api.getSchoolListByArea({ areaId: cityInfo.code }).then(res => {
                this.schoolList = res.data.schoolList;
			});
        }
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    height: 100%;
}
.body {
    display: flex;
    margin-top: 15px;
    height: calc(100% - 69px);
}
.content {
    padding: 0px 15px 15px;
    flex: 1;
    /deep/ .choose-wrap {
        background: $grey-bg;
    }
}
.nav {
    width: 90px;
    background: $grey-bg;
    li {
        width: 90px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 12px;
        color: #40444C;
        position: relative;
    }
    .active {
        background: #fff;
        color: #2E2E2E;
    }
    .active::after {
        content: '';
        width: 3px;
        height: 14px;
        position: absolute;
        left: 0px;
        top: 18px;
        background: $theme-color;
    }
}
.title {
    margin: 30px 0px 10px;
    font-size: 13px;
    color: #2E2E2E;
}
.list {
    display: flex;
    flex-wrap: wrap;
    li {
        width: 85px;
        height: 96px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 10px 10px 0px;
        box-sizing: border-box;
    }
}
.shop-img {
    max-height: 60px;
    max-width: 60px;
}
.name {
    font-size: 12px;
}
</style>